<template>
  <el-container>
    <!-- 侧边导航 -->
    <el-aside :width="width + 'px'">
      <!-- 导航菜单 -->
      <el-menu
        :default-active="$route.path"
        :router="true"
        @select="selectMenu"
        class="el-menu-vertical-demo"
        text-color="#fff"
        active-text-color="#ffd04b"
      >
        <el-menu-item
          :index="item.name"
          v-for="(item, index) in routes"
          :key="index"
        >
          <i :class="item.icon"></i>
          <span slot="title" v-show="width >= 250 ? true : false">{{
            item.title
          }}</span>
        </el-menu-item>
      </el-menu>
    </el-aside>
    <el-container>
      <!-- 头部 -->
      <el-header>
        <!-- 面包屑导航 -->
        <div class="breadcrumb">
          <i :class="className" style="color: #fff" @click="shrinkageFn"></i>
          <Breadcrumb :routes="routes" />
        </div>
        <!-- 用户信息 -->
        <div class="userInfo">
          <el-dropdown>
            <span class="el-dropdown-link">
              <div class="userImg">
                <img src="@/assets/4.jpg" alt="" />
              </div>
              <i
                class="el-icon-arrow-down el-icon--right icon"
                style="color: #fff"
              ></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item
                @click.native="exitFn"
                class="el-icon-switch-button"
                >&nbsp;退出</el-dropdown-item
              >
            </el-dropdown-menu>
          </el-dropdown>
        </div>
      </el-header>
      <!-- 主体内容 -->
      <el-main>
        <router-view />
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
import Breadcrumb from "@/components/Breadcrumb";
export default {
  components: {
    Breadcrumb,
  },
  created() {
    // 获取用信息列表，并加工处理数据，渲染侧边导航栏
    this.$router.options.routes.forEach((item) => {
      if (item.children) {
        this.routes = item.children;
      }
    });
  },
  data() {
    return {
      routes: [],
      navTitle: "",
      width: 250,
      className: "el-icon-s-fold",
    };
  },
  methods: {
    selectMenu(pathName) {
      const obj = this.routes.filter((item) => item.name === pathName)[0];
      this.navTitle = obj.title;
    },
    exitFn() {
      this.$store.commit("user/loginOut");
      this.$router.push("/login");
    },
    shrinkageFn() {
      this.width = this.width >= 250 ? 70 : 250;
      this.className =
        this.width >= 250 ? "el-icon-s-fold" : "el-icon-s-unfold";
    },
  },
};
</script>
<style lang="less" >
.el-header {
  display: flex;
  color: #333;
  align-items: center;
  background-color: #545c64;
  justify-content: space-between;
  .breadcrumb {
    display: flex;
    vertical-align: middle;
    i {
      color: #666;
      font-size: 35px;
      margin-right: 8px;
      cursor: pointer;
    }
  }
  .userInfo {
    .el-dropdown-link {
      display: flex;
      align-items: baseline;
      .userImg {
        width: 44px;
        height: 44px;
        border-radius: 10px;
        overflow: hidden;
        img {
          width: 100%;
        }
      }
    }
  }
}
.el-container {
  height: 100vh;
}
.el-aside {
  height: 100%;
  background-color: #545c64;
  color: #333;
  .el-menu {
    border-right: none;
    background-color: #545c64;
  }
}
.icon {
  cursor: pointer;
}
.el-main {
  background-color: #e9eef3;
  color: #333;
}

.el-menu-item:hover {
  background: #80b3ff67 !important;
  color: #fff !important;
}

.el-menu-item.is-active {
  background: #80b3ffcb !important;
  color: #fff !important;
}
</style>